<template>
  <div :class="['PaiPanXinxiPanel',showOrHideCls]">
    <div class="view" :style="{height:viewHeight+'rem'}" :id="view_id">
      <div class="myinfoDiv whiteBack">
             <div class="user">
               <div class="headimg">
                 <img src="../../assets/img/ui/empty.png">
               </div>
               <div class="name">姓名:{{paipData.tian_di_pan.user_name}}</div>
               <div class="ppfs">排盘方式:{{paipData.tian_di_pan.pai_pan_mode==Enum.paiType_0?'普通排盘':'全部排盘'}}</div>
               <div class="address">地区:{{paipData.tian_di_pan.birthplace}}</div>
             </div>
             <div class="yangli">
               <span>阳历: </span>
               <span style="color: #6A6A6A;">{{paipData.tian_di_pan.gl_birthday}}</span>
             </div>
             <div class="yangli">
               <span>农历: </span>
               <span style="color: #6A6A6A;">{{paipData.tian_di_pan.nl_birthday}}</span>
             </div>
             <div class="shengxiao">
               <div class="item br1">
                 <p class="p1">{{paipData.tian_di_pan.sheng_xiao}}</p>
                 <p class="p2">生肖</p>
               </div>
               <div class="item br1">
                 <p class="p1">{{paipData.tian_di_pan.xing_zuo}}</p>
                 <p class="p2">星座</p>
               </div>
               <div class="item br1">
                 <p class="p1">{{paipData.tian_di_pan.ben_ming_pu_sa}}</p>
                 <p class="p2">本命佛</p>
               </div>
               <div class="item br1">
                 <p class="p1">{{paipData.tian_di_pan.xing_xiu}}</p>
                 <p class="p2">星宿</p>
               </div>
               <div class="item">
                 <p class="p1">{{paipData.tian_di_pan.ben_gong}}</p>
                 <p class="p2">命宫</p>
               </div>
             </div>
             <div class="yangli">
               <span>惊蛰: </span>
               <span style="color: #6A6A6A;"> {{fenGestr(paipData.tian_di_pan.jie_qi_0,':',1,2)}}</span>
             </div>
             <div class="yangli">
               <span>清明: </span>
               <span style="color: #6A6A6A;"> {{fenGestr(paipData.tian_di_pan.jie_qi_1,':',1,2)}}</span>
             </div>
             <div class="yangli">
               <span>起运: </span>
               <span style="color: #6A6A6A;">{{paipData.tian_di_pan.qi_yun_time}}</span>
             </div>
             <div class="yangli">
               <span>交运: </span>
               <span style="color: #6A6A6A;">{{paipData.tian_di_pan.jiao_yun_time}}</span>
             </div>
           </div>
      <div class="qianzaoDivqianzao" :id="quanzaoID" :style="{'height':txtDiv2Height+'px'}">
             <div :class="[txtdiv2FixCls]" :id="quanzid" style="background-color: #E8E8E8;width: 100%;">
               <div class="qianzaoDiv whiteBack">
                 <div class="div1">
                   <div class="onediv">
                     <div class="qzao br2 bb2">{{paipData.tian_di_pan.qian_kun_zao}}</div>
                     <ul class="ulcls">

                       <template v-for="(row_item,row_i) in getDataRow(paipData.tian_di_pan.tian_gan_shi_shen,5)" :key="row_i">
                         <li>
                           <div v-for="(nn,ni) in 5" :class="['br2','bb2',(ni===4?'ld':'')]">
                             {{paipData.tian_di_pan.tian_gan_shi_shen[ni+row_i*5].name}}
                           </div>
                         </li>
                       </template>

                       <template v-for="(row_item,row_i) in getDataRow(paipData.tian_di_pan.ba_zi,5)" :key="row_i">
                         <li>
                           <div v-for="(nn,ni) in 5" :class="['br2','bb2','red',(ni===4?'ld':'')]">
                             {{paipData.tian_di_pan.ba_zi[ni+row_i*5].name}}
                           </div>
                         </li>
                       </template>

                       <template v-for="(row_item,row_i) in getDataRow(paipData.tian_di_pan.di_zhi_cang_gan,5)" :key="row_i">
                         <li>
                           <div v-for="(nn,ni) in 5" :class="['br2','bb2',(ni===4?'ld':'')]">
                             {{paipData.tian_di_pan.di_zhi_cang_gan[ni+row_i*5].name}}
                           </div>
                         </li>
                       </template>
                     </ul>
                   </div>

                   <div class="onediv">
                     <div class="w1 br2 bb2">旺衰</div>
                     <ul class="ulcls">
                       <template v-for="(row_item,row_i) in getDataRow(paipData.tian_di_pan.wang_shuai,5)" :key="row_i">
                         <li>
                           <div v-for="(nn,ni) in 5" :class="['br2','bb2',(ni===4?'ld':'')]">
                             {{paipData.tian_di_pan.wang_shuai[ni+row_i*5].name}}
                           </div>
                         </li>
                       </template>
                     </ul>

                   </div>
                   <div class="onediv">
                     <div class="w1 br2">纳音</div>
                     <ul class="ulcls">
                       <template v-for="(row_item,row_i) in getDataRow(paipData.tian_di_pan.na_yin,5)" :key="row_i">
                         <li>
                           <div v-for="(nn,ni) in 5" :class="['br2','bb2',(ni===4?'ld':'')]">
                             {{paipData.tian_di_pan.na_yin[ni+row_i*5].name}}
                           </div>
                         </li>
                       </template>
                     </ul>

                   </div>

                 </div>
                 <div class="div2">
                   <span class="span1">天干留意</span>
                   <span class="span2">{{paipData.tian_di_pan.tian_gan_liu_yi}}</span>
                 </div>
                 <div class="div2">
                   <p class="span1 p1">地支留意</p>
                   <p class="span2 p1">{{paipData.tian_di_pan.di_zhi_liu_yi}}</p>
                 </div>
               </div>
               <div class="qianzaoDiv_b"></div>
             </div>
           </div>
      <div class="shenshaDiv whiteBack">
        <div class="div1">
          <div class="onediv bb2"><span>神煞</span></div>
          <ul class="ulcls">
            <li>
              <div class="ld bb2"><span>[年干]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.year_gan_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.year_gan_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>
            <li>
              <div class="ld br2 bb2"><span>[年支]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.year_zhi_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.year_zhi_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>
            <li>
              <div class="ld br2 bb2"><span>[月干]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.month_gan_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.month_gan_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>
            <li>
              <div class="ld br2 bb2"><span>[月支]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.month_zhi_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.month_zhi_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>
            <li>
              <div class="ld br2 bb2"><span>[日干]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.day_gan_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.day_gan_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>
            <li>
              <div class="ld br2"><span>[日支]</span></div>
              <ul class="ulclslist bl2">
                <template v-for="(row_item,row_i) in getDataRow(paipData.shen_sha_pan.day_zhi_shen_sha,4)" :key="row_i">
                  <li :class="['ulclslist_li']">
                    <div v-for="(item,index) in 4" :key="index" :class="['bb2',(index<3?'br2':'')]">
                      {{paipData.shen_sha_pan.day_zhi_shen_sha[row_i*4+index].name}}
                    </div>
                  </li>
                </template>
              </ul>
            </li>

          </ul>
        </div>
      </div>
      <div class="wangshaiDiv whiteBack">
       <div class="div1">
         <ul class="ulcls">
           <li class="bb2">
             <div class="br2 dcen">旺衰</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_wang_shuai,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_wang_shuai[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">纳音</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_na_yin,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_na_yin[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">十神</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_shi_shen,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_shi_shen[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">大运</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     <p class="red light">{{paipData.shui_yun_pan.da_yun[index].name}}</p>
                     <p class="light">{{paipData.shui_yun_pan.da_yun_age[index].name}}岁</p>
                   </div>
                 </li>
               </template>
             </ul>

           </li>
           <li class="bb2">
             <div class="br2 dcen">始于</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_begin_year,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_begin_year[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">流年</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_liu_nian,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_liu_nian[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">止于</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.da_yun_end_year,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.da_yun_end_year[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">旺衰</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.xiao_yun_wang_shuai,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.xiao_yun_wang_shuai[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">小运</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.xiao_yun,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.xiao_yun[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">旺衰</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.xiao_yun_liu_nian_wang_shuai,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.xiao_yun_liu_nian_wang_shuai[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">
             <div class="br2 dcen">流年</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.xiao_yun_liu_nian,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.xiao_yun_liu_nian[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
           <li class="bb2">

             <div class="br2 dcen">虚岁</div>
             <ul class="ulliun">
               <template v-for="(row_item,row_i) in getDataRow(paipData.shui_yun_pan.xiao_yun_age,8)" :key="row_i">
                 <li class="bb2">
                   <div v-for="(item,index) in 8" :key="index" :class="[(index<7?'br2':'')]">
                     {{paipData.shui_yun_pan.xiao_yun_age[row_i*8+index].name}}
                   </div>
                 </li>
               </template>
             </ul>
           </li>
         </ul>
       </div>
     </div>
    </div>
    <div :class="['mingshuBtn',minshuBtnShow]" @click="mingshubtnClick()"></div>
  </div>
</template>


<style scoped>
.PaiPanXinxiPanel{
  position: relative;background-color:#E8E8E8;width: 100%;height: 100%;
}

.view{
  width: 100%;height: 100%;overflow-y:auto;overflow-x:hidden;
}
.view .whiteBack{
  width: 96%;background-color: #FFFFFF;border-radius: 0.1rem;
  padding-left:2%;padding-right: 2%;padding-bottom: 0.2rem;
}
.view .bl2{
  border-left: 0.01rem solid #FFFFFF;
}
.view .br2{
  border-right: 0.01rem solid #FFFFFF;
}
.view .bt2{
  border-top: 0.01rem solid #FFFFFF;
}
.view .bb2{
  border-bottom: 0.01rem solid #FFFFFF;
}
/************用户信息*****/
.myinfoDiv{
  position: relative;
}
.myinfoDiv .user{
  position: relative;display:flex;display: -webkit-flex;flex-direction:row;align-items: center; padding-top: 0.2rem;
}
.myinfoDiv .user .headimg{
  position: relative;width: 0.48rem;height: 0.48rem;background-color: #6A6A6A;border-radius: 50%;
}
.myinfoDiv .user .headimg img{
  position: relative;width: 0.46rem;height: 0.46rem;left: 0.01rem;top:0.01rem;border-radius: 50%;
}
.myinfoDiv .user .name{
  position: relative;font-weight: 400;font-size: 0.24rem;color: #000000;line-height: 0.48rem;padding-left: 0.2rem;
}
.myinfoDiv .user .ppfs{
  position: relative;background-color:#DDEFF7;font-weight: 400;font-size:0.22rem;color: #5587AD;border-radius: 0.25rem;
  height: 0.34rem;padding-left: 0.1rem;padding-right: 0.1rem;line-height: 0.34rem;margin-left: 0.3rem;
}
.myinfoDiv .user .address{
  position: relative;background-color:#DDEFF7;font-weight: 400;font-size:0.22rem;color: #5587AD;border-radius: 0.25rem;
  height: 0.34rem;padding-left: 0.1rem;padding-right: 0.1rem;line-height: 0.34rem;margin-left: 0.3rem;
}
.myinfoDiv .yangli{
  position: relative;width: 7.16rem;height: 0.34rem;font-weight: 400;font-size: 0.24rem;color: #000000;border-radius: 0.25rem;
  background-color:#F2F2F2;margin-top: 0.1rem;line-height: 0.34rem;text-align: left;
}
.myinfoDiv .yangli span{
  margin-left: 0.2rem;
}
.myinfoDiv .shengxiao{
  position: relative;width: 7.16rem;margin-top: 0.2rem;height: 0.5rem;margin-bottom: 0.2rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.myinfoDiv .shengxiao .br1{
  border-right: 0.01rem solid #E2E1E0;height: 0.5rem;
}
.myinfoDiv .shengxiao .p1{
  font-weight: 500;font-size: 0.24rem;color: #000000;
}
.myinfoDiv .shengxiao .p2{
  font-weight: 400;font-size: 0.2rem;color: #B6B6B6;line-height: 0.24rem;padding-top: 0.1rem;
}
.myinfoDiv .shengxiao .item{
  position: relative;display: inline-block;padding-left: 0.3rem;padding-right: 0.3rem;
}
/************乾造*****/

.qianzaoDivqianzao{
  position: relative;    padding-top: 0.2rem;

}
.qianzaoDiv{
  padding-top: 0.2rem;
}
.qianzaoDiv_b{
  background-color:#E8E8E8 ;width: 100%;height: 0.2rem;    border-radius:0 0 0.1rem;
}

.qianzaoDiv .div1{
  position: relative;width: 7.16rem;background-color: #F4EBE2;border-radius: 0.1rem;text-align: center;
  font-size: 0.22rem;color: #2F2F2F;font-weight: 400;line-height: 0.46rem;

}
.qianzaoDiv .div1 .onediv{
  position: relative;width: 7.16rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.qianzaoDiv .div1 .onediv .red{
  color: #CC6E09;
}
.qianzaoDiv .div1 .w1{
  width: 1rem;
}
.qianzaoDiv .div1 .w2{
  width: 1.2rem;
}
.qianzaoDiv .div1 .w3{
  width: 1.36rem;
}
.qianzaoDiv .div1 .onediv .qzao{
  position: relative;width: 1rem;display:flex;display: -webkit-flex;align-items:center; justify-content:center;
}
.qianzaoDiv .div1 .onediv .ulcls{
  position: relative;
}
.qianzaoDiv .div1 .onediv .ulcls li{
  position: relative;width: 6.16rem;height: 0.46rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.qianzaoDiv .div1 .onediv .ulcls li div{
  position: relative;width: 1.2rem;
}
.qianzaoDiv .div1 .onediv .ulcls li .ld{
  width: 1.36rem;
}


.qianzaoDiv .div2{
  position: relative;width: 7.16rem;background-color: #F2F2F2;border-radius: 0.1rem;text-align: left;margin-top: 0.1rem;

}
.qianzaoDiv .div2 .span1{
  font-weight: 600;font-size: 0.24rem;color: #2F2F2F;margin-left:0.2rem; line-height: 0.54rem;
}
.qianzaoDiv .div2 .span2{
  font-weight: 400;font-size: 0.26rem;color: #666666;margin-left:0.2rem; line-height: 0.54rem;
}
.qianzaoDiv .div2 .p1{
  line-height: 0.4rem;
}
.txtDiv2_piao{
  position: fixed;top:0;z-index: 1;
}
/*********神啥**/
.shenshaDiv{
  position: relative;padding-top: 0.2rem;white-space: nowrap;
}
.shenshaDiv .div1{
  position: relative;width: 7.16rem;background-color: #F4EBE2;border-radius: 0.1rem;text-align: center;
  font-size: 0.22rem;color: #2F2F2F;font-weight: 400;line-height: 0.46rem;

}
.shenshaDiv .div1 .onediv{
  position: relative;width: 7.16rem;text-align: left;
}
.shenshaDiv .div1 .onediv span{
  margin-left: 0.2rem;
}

.shenshaDiv .div1  .ulcls{
  position: relative;
}
.shenshaDiv .div1  .ulcls li{
  position: relative;width: 7.16rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.shenshaDiv .div1 .ulcls li div{
  position: relative;width: 1.5rem;line-height: 0.46rem;
}
.shenshaDiv .div1 .ulcls li .ld{
  width: 1.16rem;    display: flex;display: -webkit-flex;align-items: center;justify-content: center;
}
.shenshaDiv .div1 .ulcls li .ld span{
  margin-left: -0.2rem;
}
.shenshaDiv .div1 .ulcls li .sxdiv{
  position: relative;width: 6rem;
  display:flex;display: -webkit-flex;flex-direction:row;flex-wrap:wrap;
}
.shenshaDiv .div1  .ulclslist{
  position: relative;    width: 6rem;
}
.shenshaDiv .div1  .ulclslist .ulclslist_li{
  position: relative;
}
.shenshaDiv .div1  .ulclslist .ulclslist_li div{
  position: relative;height: 0.46rem;
}
/**旺衰**/
.wangshaiDiv{
  position: relative;margin-top: 0.2rem;padding-top: 0.2rem;
}

.wangshaiDiv .div1{
  position: relative;width: 7.2rem;background-color: #F4EBE2;border-radius: 0.1rem;text-align: center;
  font-size: 0.22rem;color: #2F2F2F;font-weight: 400;line-height: 0.46rem;

}
.wangshaiDiv .div1 .red{
  color: #CC6E09;
}
.wangshaiDiv .div1 .light{
  line-height: 0.4rem;
}
.wangshaiDiv .div1 .w1{
  width: 0.8rem;
}

.wangshaiDiv .div1 .dcen{
  display:flex;display: -webkit-flex;align-items: center;justify-content:center;
}

.wangshaiDiv .div1  .ulcls{
  position: relative;width: 100%;
}
.wangshaiDiv .div1  .ulcls li{
  position: relative;
  display:flex;display: -webkit-flex;flex-direction:row;width: 100%;
}
.wangshaiDiv .div1  .ulcls li div{
  position: relative; width: 0.785rem;
}
.wangshaiDiv .div1 .ulliun{
  position: relative;width: 6.4rem;
}
.wangshaiDiv .div1 .ulliun li{
  position: relative;width: 6.4rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.wangshaiDiv .div1 .ulliun li div{
  position: relative; width: 0.782rem;
}


.mingshuBtn{
  position: fixed;top: 4.1rem;background-image: url("../../assets/img/jianpai/msbtn.png");
  width: 2rem;height: 0.6rem;right: 0;z-index: 100;

}
</style>

<script setup>
import Enum from "@/gamejs/Enum";
import {reactive,ref,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
import Util from "@/gamejs/Util";


let store = useStore();
let router = useRouter();
let routerData = useRoute();
let clsid=winApp.getClsId();
let viewHeight=ref(17);
let minshuBtnShow=ref('viewShow');
let scrollTop=0;
let txtDiv2Height=ref(0);
let txtdiv2FixCls=ref('');
let quanzaoID=winApp.getClsId();
let quanzid=winApp.getClsId();
let view_id=winApp.getClsId();
/*组件挂载完成后执行的函数；*/
onMounted(() => {
  console.log("PaiPanXinxiPanel onMounted 初始化排盘信息");
  let _h=Math.floor(document.body.clientHeight/(window._windSize/100))/100;
  //viewHeight.value=_h-store.state.bottomPanelHeight-0.1;
  viewHeight.value=_h;
  initData();
  if(routerData.query.view==='paiBanpath'){
    getMyData();
  }
  if(Util.GetUrlParam('recdid')!=''){
    //minshuBtnShow.value='viewHide';
    getRecdData();
  }
  txtDiv2Height.value=$("#"+quanzid).height();

  $('#'+view_id).scroll(function(){
   // console.log($("#"+quanzaoID).offset().top);
    let divHeight = $(this).height();
    let nScrollHeight = $(this)[0].scrollHeight;
    let nScrollTop = $(this)[0].scrollTop;

    if($("#"+quanzaoID).offset().top>0){
      txtdiv2FixCls.value='';
    }else{
      txtdiv2FixCls.value='txtDiv2_piao';
    }
    scrollTop=nScrollTop;
  });
});


onBeforeUnmount(() => {
  console.log('PaiPanXinxiPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PaiPanXinxiPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');


function fenGestr(str,n,index,type){
  let list=str.split(n);
  if(type!=2){
    return list[index];
  }else{
    let sss='';
    for(let i=1;i<list.length;i++){
      sss=sss+list[i];
      if(i<list.length-1)sss=sss+':';
    }
    return sss;
  }

}





function mingshubtnClick(){
  console.log("JianPaiPanel mingshubtnClick    ");
  router.push({ path:Enum.lifeInterpretPanel, query: {t: (new Date()).getTime(),recdid:paipData.rec_id}});
}

/**
 * 获取行列
 * @param list
 * @param r_len 一行几个
 */
function getDataRow(list,r_len){


  let row=0;
  if(list.length%r_len!=0){
    row=Math.floor(list.length/r_len)+1;
    let total=r_len-(list.length%r_len);
    for(let i=0;i<total;i++){
      list.push({id:'',name:' '});
    }
  }else{
    row=Math.floor(list.length/r_len);
  }

  return row;
}
function getRecdData(){
  let data={
    id:Util.GetUrlParam('recdid'),
    account:store.state.userId,
  }
  $.ajax({
    url: store.state.data_url+'/g_paipan_rec',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("GameData getRecdData:",data.status,data);
      if(data.status==0){
        // winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'排盘数据回来');

        initData(data.content);
      }else{
        winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'记录失败');
      }

    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
      winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'网络错误');
    }

  });
}
function getMyData(){
  store.state.ztytime=(store.state.addData.length===0?0:1);
  let data={
    user_name:store.state.userName,
    sex:store.state.gender,
    gl_year:store.state.dateData[0],
    gl_month:parseInt(store.state.dateData[1]),
    gl_day:parseInt(store.state.dateData[2]),
    gl_hour:parseInt(store.state.dateData[3]),
    gl_minute:parseInt(store.state.dateData[4]),
    pai_pan_mode:store.state.selectPaiType,
    is_gong_li:store.state.is_gong_li,
    ztytime:store.state.ztytime,
    sheng_name:(store.state.addData.length===0?'':store.state.addData[0].name),
    city_name:(store.state.addData.length===0?'':store.state.addData[1].name),
    account:store.state.userId,
    telephone:store.state.telephone
  }
  $.ajax({
    url: store.state.data_url+'/g_pai_pan',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("GameData getPaiPanData:",data.status,data);
      if(data.status==0){
       // winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'排盘数据回来');
        initData(data.content);
      }else{
        winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'排盘失败');
      }

    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
      winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'网络错误');
    }

  });
}

function initData(data){
  if(data==null)data={tian_di_pan:{},shui_yun_pan:{},shen_sha_pan:{}};
  if(data['rec_id']!=null)paipData.rec_id=data['rec_id'];
  //console.log('rec_id=========',data['rec_id']);
  for(let key in paipData.tian_di_pan){
    //console.log(key,'=========',data.tian_di_pan[key]);
    if(data.tian_di_pan[key]!=null)paipData.tian_di_pan[key]=data.tian_di_pan[key]
  }
  for(let key in paipData.shen_sha_pan){
    if(data.shen_sha_pan[key]!=null)paipData.shen_sha_pan[key]=data.shen_sha_pan[key]
  }
  for(let key in paipData.shui_yun_pan){
    if(data.shui_yun_pan[key]!=null)paipData.shui_yun_pan[key]=data.shui_yun_pan[key]
  }

  for(let i=1;i<5;i++){
    if(paipData.tian_di_pan.wang_shuai.length<i){
      paipData.tian_di_pan.wang_shuai.push({id:-1,name:''});
    }
    if(paipData.tian_di_pan.na_yin.length<i){
      paipData.tian_di_pan.na_yin.push({id:-1,name:''});
    }
  }
  for(let i=1;i<6;i++){
    if(paipData.tian_di_pan.tian_gan_shi_shen.length<i){
      paipData.tian_di_pan.tian_gan_shi_shen.push({id:-1,name:''});
    }
  }
  for(let i=1;i<9;i++){
    if(paipData.tian_di_pan.ba_zi.length<i){
      paipData.tian_di_pan.ba_zi.push({id:-1,name:''});
    }
    if(paipData.shui_yun_pan.xiao_yun.length<i){
      paipData.shui_yun_pan.xiao_yun.push({id:-1,name:''});
    }
    if(paipData.shui_yun_pan.xiao_yun_age.length<i){
      paipData.shui_yun_pan.xiao_yun_age.push({id:-1,name:''});
    }
  }
  for(let i=1;i<16;i++){
    if(paipData.tian_di_pan.di_zhi_cang_gan.length<i){
      paipData.tian_di_pan.di_zhi_cang_gan.push({id:-1,name:''});
    }
  }
  setTimeout(()=>{
    txtDiv2Height.value=$("#"+quanzid).height();
  },200);

}

let paipData=reactive({
  rec_id:-1,
  shen_sha_pan:{
    day_gan_shen_sha:[],day_zhi_shen_sha:[],hour_gan_shen_sha:[],hour_zhi_shen_sha:[],month_gan_shen_sha:[],month_zhi_shen_sha:[],
    year_gan_shen_sha:[],year_zhi_shen_sha:[],
  },
  shui_yun_pan:{
    da_yun:[],da_yun_age:[],da_yun_begin_year:[],da_yun_end_year:[],da_yun_liu_nian:[],da_yun_na_yin:[],xiao_yun_wang_shuai:[],
    da_yun_shi_shen:[],da_yun_wang_shuai:[],xiao_yun:[],xiao_yun_age:[],xiao_yun_liu_nian:[],xiao_yun_liu_nian_wang_shuai:[]
  },
  tian_di_pan:{
    ba_zi:[],//八字
    ben_gong:'',
    ben_ming_pu_sa:'',
    birthplace:'',
    di_zhi_cang_gan:[],
    tian_gan_shi_shen:[],
    wang_shuai:[],
    di_zhi_liu_yi:'',
    gl_birthday:'',
    jiao_yun_time:'',
    jie_qi_0:'',
    jie_qi_1:'',
    ming_gong:'',
    na_yin:[],
    nl_birthday:'',
    pai_pan_mode:0,
    qi_yun_time:'',
    qian_kun_zao:'',
    sex:'0',
    sheng_xiao:'',tai_yuan:'',tian_gan_liu_yi:'',user_name:'',xing_xiu:'',xing_zuo:'',zty_time_flag:''
  }
});
</script>



